<template>
  <div id="lessonShare">
      <div class="lesson-detail">
        <zm-video :videoShow.sync="videoShow" :cid = "cid" :lessonId = "lessonId"></zm-video>
      </div>
      <downLoad :hasShare="hasShare"></downLoad>
  </div>
</template>

<script>
  import api from '../api'
  import zmVideo from '@/components/common/zmVideo'
  import downLoad from './../components/common/download/downLoad.vue'
  export default {
    name: 'lessonShare',
    data () {
      return {
        videoShow: true,
        descri: '',
        cid: '',
        lessonId: '',
        hasShare: '',
        appId: "wx921f8ebbe6ced2c2",
        wxSharePic: "https://static.shengxue985.com/oss/20180830/e5089c21aa9249e0bd121f7a7e21b582.png"
      }
    },
    components: {
      zmVideo,
      downLoad
    },
    created () {
      this.cid = this.$route.query.cid,
      this.lessonId = this.$route.query.lessonId
      this.hasShare = this.$route.query.hasShare
      window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.hengshuping, false);
      this.secondShare(true, {
            url: window.location.href,
            appId: this.appId // 必填，公众号的唯一标识
          });
    },
    methods: {
      //二次分享
        secondShare(hasData, params) {
          api
            .getSecondShareKey(params)
            .then(res => {
              if (res.data.code == 0) {
                let data = res.data.data;
                wx.config({
                  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                  appId: data.appId, // 必填，公众号的唯一标识
                  timestamp: data.timestamp, // 必填，生成签名的时间戳
                  nonceStr: data.nonceStr, // 必填，生成签名的随机串
                  signature: data.signature, // 必填，签名，见附录1
                  jsApiList: [
                    "chooseImage",
                    "previewImage",
                    "uploadImage",
                    "downloadImage",
                    "checkJsApi",
                    "onMenuShareTimeline",
                    "onMenuShareAppMessage",
                    "onMenuShareQQ",
                    "onMenuShareWeibo"
                  ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
                this.wxShare(hasData, {
                  title: this.title || "邀您查看话题详情", // 分享标题
                  desc: this.content || "升学在线,学习超给力", // 分享描述
                  link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl: this.wxSharePic, // 分享图标
                  type: "", // 分享类型,music、video或link，不填默认为link
                  dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
                  success: function() {
                    // 用户确认分享后执行的回调函数
                  },
                  cancel: function() {
                    // 用户取消分享后执行的回调函数
                  }
                });
              } else {
              }
            })
            .catch(err => {
            });
        },
        wxShare(hasData, config) {
          let c;
          if (!hasData) {
            c = {};
            c.title = "邀您查看话题详情";
            c.desc = "升学在线,学习超给力";
            (c.link = window.location.href), (c.imgUrl = this.wxSharePic);
          } else {
            c = config;
          }
          if (location.hash == "#debug") {
            alert(JSON.stringify(c));
          }
          wx.ready(function() {
            wx.onMenuShareAppMessage(c);
            wx.onMenuShareTimeline(c);
            wx.onMenuShareQQ(c);
            wx.onMenuShareWeibo(c);
          });
        },
      hengshuping () {
          if (window.orientation == 180 || window.orientation == 0) {
            this.hasShare = true
          }
          if (window.orientation == 90 || window.orientation == -90) {
              this.hasShare = false
          }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../styles/mixin.scss";
  #lessonShare {
    width: 100%;
    height: 100%;
  }
  .lesson-detail {
    width: 100%;
    height: 100%;
  }
  
</style>

<style lang="scss">
  @import "../styles/mixin.scss";

  body {
    padding: 0!important;
    margin: 0!important;
  }
  .fieldset, img {
    border: 0;
    width: 100%;
  }
</style>
